import { h, init } from 'snabbdom'

// 返回值：patch函数，作用是对比链两个vnode的差异并更新到真实DOM
let pacth = init([])

// 创建虚拟DOM
// 第一个参数：标签+选择器
// 第二个参数：可以是 vnode 或者数组
let vnode = h('div#container.cls', h(
  'div',
  '这是一个div，2秒后会被更新'
))

let app = document.querySelector('#app')

let oldVnode = pacth(app, vnode)

// 模拟异步任务更新DOM
setTimeout(() => {
  vnode = h('h1.title', [
    h('div', '异步更新数据'),
    h('a', 'a标签，两秒后就被清空')
  ])
  oldVnode = pacth(oldVnode, vnode)

  setTimeout(() => {
    // 清空页面元素，使用注释节点
    // patch(oldVnode, null) 这种写法是错误的，v0.7.4版本文档错误
    pacth(oldVnode, h('!'))
  }, 2000)
}, 2000)